<template>
  <div v-loading="loading"
       element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)">
    <div class="main_box">
      <div class="box_left">
        <el-card id="info_card" shadow="always">
          <el-descriptions title="基本信息">
            <el-descriptions-item label="姓名">{{ patient.name }}</el-descriptions-item>
            <el-descriptions-item label="性别">{{ patient.sex }}</el-descriptions-item>
            <el-descriptions-item label="年龄">{{ patient.age }}</el-descriptions-item>
            <el-descriptions-item label="民族">
              <el-tag size="small">{{ patient.nation }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="身高">{{ patient.height }}cm</el-descriptions-item>
            <el-descriptions-item label="体重">{{ patient.weight }}kg</el-descriptions-item>
            <el-descriptions-item label="标签">
              <el-tag size="small"
                      v-for="(tag, index) in tags"
                      :key="index"
                      style="margin: 0px 7px;">
                {{ tag }}
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        <div id="case_div">
          <el-collapse v-model="caseInfoShowed" style="padding: 5px; background-color: white; font-size: 30px;">
            <el-collapse-item title="摘要" name="abstract">
              <div>{{ abstract }}</div>
            </el-collapse-item>
            <el-collapse-item title="主诉" name="main">
              <div>{{ currentCase.main }}</div>
            </el-collapse-item>
            <el-collapse-item title="现病史" name="presents">
              <div>{{ currentCase.presents }}</div>
            </el-collapse-item>
            <el-collapse-item title="既往史" name="history">
              <div>{{ currentCase.history }}</div>
            </el-collapse-item>
            <el-collapse-item title="治疗方案" name="note">
              <div>{{ currentCase.therapy }}</div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <div class="box_right">
        <el-timeline style="float: left; width: 80%; height: 50%;">
          <el-timeline-item
            v-for="(tinyCase, index) in tinyCases"
            :key="index"
            :timestamp="tinyCase.timestamp"
            placement="top">
            <el-card shadow="hover" style="min-height: 100px;">
              <div @click="toCase(tinyCase.id)" class="patient-timeLine-content-box">
                <div class="patient-timeLine-content-header">
                  <p>病例编号：<b>{{ tinyCase.id }}</b></p>
                </div>
                <div class="patient-timeLine-content-detail">
                  <h4>{{ tinyCase.content }}</h4>
                </div>
                <div class="patient-timeLine-content-time">
                  <p>{{ tinyCase.time }}</p>
                </div>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
        <div style="float: left; width: 80%; height: 50%;">
          <img :src="wcB64" width="100%">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  name: 'CasePatientImg',
  data () {
    return {
      noTg: true,
      loading: true,
      wcB64: '',
      patient: {
        id: 0,
        name: '',
        sex: '',
        age: '',
        height: '',
        weight: '',
        nation: ''
      },
      tags: [
      ],
      tinyCases: [

      ],
      currentCase: {
      },
      caseInfoShowed: [
        'main',
        'abstract'
      ],
      abstract: ''
    }
  },
  mounted () {
    this.inits()
  },
  methods: {
    inits () {
      console.log('init')
      console.log(Vue.prototype.GLOBAL.tgCaseId)
      if (Vue.prototype.GLOBAL.tgCaseId === '') {
        this.noTg = true
        // 表示为空
        return
      }
      this.$axios
        .get('/patientImg', {
          params: {
            patientId: Vue.prototype.GLOBAL.tgCaseId
          }
        })
        .then(successResponse => {
          if (successResponse.data.code === 200) {
            this.patient = successResponse.data.data[0]
            this.tags = successResponse.data.data[1]
            this.currentCase = successResponse.data.data[2]
            this.tinyCases = successResponse.data.data[3]
            console.log(this.tinyCases)
            this.abstract = successResponse.data.data[4]
            this.wcB64 = 'data:image/png;base64,' + successResponse.data.data[5]
            this.loading = false
            // this.$router.replace({path: '/index'})
          }
        })
        .catch(failResponse => {
        })
    },
    toCase (index) {
      Vue.prototype.GLOBAL.tgCaseId = index
      this.inits()
    }
  }
}
</script>

<style scoped>
#myDiagramDiv {
  background-color: white;
  border: 1px solid black;
  width: 100%;
  height: 700px;
  position: relative
}
.tl {
  margin: 10% 10% 10% 10%;
}
.main_box {
  margin-top: 5%;
}
.box_left {
  float: left;
  height: 100%;
  width: 60%;
}
#info_card, #case_div {
  height: auto;
  width: 70%;
  margin: auto;
}
#case_div div {
  background-color: white;
  font-size: 16px;
}
.box_right {
  float: right;
  height: 100%;
  width: 40%;
}

.patient-timeLine-content-header {
  width: 100%;
  display: flex;
  justify-content: start;
  margin-bottom: 5px;
}

.patient-timeLine-content-detail {
  font-size: 20px;
  margin-bottom: 5px;
}

.patient-timeLine-content-time {
  font-size: 12px;
  width: 100%;
  display: flex;
  justify-content: right;
}

.patient-timeLine-content-box {
  cursor: pointer;
}
</style>
